       
<style type="text/css">
@charset "utf-8";
/* CSS Document */
ul li{ list-style:none;}

#hidden{}
.hiddenTopBorder{width:154px;margin-left:0px!important;margin-left:1px; height:8px;background:url(/commonImg/topBorder.gif) bottom center no-repeat; float:left; }
.hiddenMiddleBorder{width:154px; height:auto;float:left; background:url(/commonImg/middleBorder.gif) top center repeat-y;}
.hiddenBottomBorder{ width:154px; height:50px;margin-left:0px!important;margin-left:1px;  float:left; background:url(/commonImg/bottomBorder.gif) top center no-repeat;}
.hiddenMiddleBorder ul { width:154px; height:auto; float:left; padding-left:4px; margin-left:0px;}
.hiddenMiddleBorder ul li { width:154px;float:left; padding-top:2px;}
.hiddenMiddleBorder ul li a{ display:block; float:left;  width:150px;}
.hiddenMiddleBorder ul li span{ display:block; float:left; width:30px;}
.productName{ font-size:12px; color:#FF0000;}

</style>
<script>
function over(id){
var child= document.getElementById("child"+id);
if(child!=null){
child.style.display="block";
img=document.getElementById("img"+id);
child.style.top=getTop(img)-5+"px";
child.style.left=getLeft(img)+img.width+"px";
}
}
function move(id){
var child= document.getElementById("child"+id);
if(child!=null){
child.style.display="none";
}
}
function overDiv(id){
var child= document.getElementById("child"+id);
if(child!=null){
child.style.display="block";
}
}
function moveDiv(id){
var child= document.getElementById("child"+id);
if(child!=null){
child.style.display="none";
}
}
function   getTop(e){   
  var   t=e.offsetTop   
  while(e=e.offsetParent){
  	t+=e.offsetTop;
  }   
  return   t;   
}   
  
function   getLeft(e){   
  var   t=e.offsetLeft   
  while(e=e.offsetParent){
  	t+=e.offsetLeft;
  }
  return   t;   
 } 
  
function show(id,divId){
 var div=document.getElementById(divId);
 var target=$(id);
 div.style.top=getTop(target)+"px";
 div.style.left=getLeft(target)+target.offsetWidth+"px";
div.style.display="block";

}
</script>
   
    <div id="middleLeftKind">
    	<div id="middleLeftKindTop"></div>
        <div id="middleLeftKindMiddle">
        <ul>
	    	<#list types as kinds>
	    	<#if kinds_index == 17>
	    		<#break>
	    	</#if>
	     	<li onmouseover="over(${kinds.parent.id})" onmouseout="move(${kinds.parent.id})" ><a href="/main/searchByFirstType.jhtml?id=${kinds.parent.id}">${kinds.parent.typename}</a><img id="img${kinds.parent.id}"  src="/commonImg/baobei.bmp"/></li>

	 	 	</#list>					                  	
        </ul>
		</div>
        <div id="middleLeftKindBottom">
        	 <span id="moreKind"> </span>
        </div>
    </div>
        <#list types as kinds>
	    	<#if kinds_index == 17>
	    		<#break>
	    	</#if>
     	<#if (kinds.children?size>0)>
	     	 <div class="hidden" style="width:154px; height:60px;position:absolute;top:20px;display:none; left:20px; z-index:100; " onmouseover="overDiv(${kinds.parent.id})" onmouseout="moveDiv(${kinds.parent.id})" id="child${kinds.parent.id}">
	            	<div class="hiddenTopBorder"></div>
	                <div class="hiddenMiddleBorder">
	                	<ul>
		 	  				<#list kinds.children as childKind>
		                    	<li>
		                        	<a href="/main/searchBySecondType.jhtml?id=${childKind.id}">${childKind.typename}</a>
		                        </li>
		 	  				</#list>
	                    </ul>
					</div>
	                <div class="hiddenBottomBorder"></div>
	            </div>
		</#if>
		</#list>
    
  	

    